<template>
	<view>
		<!-- 顶部导航栏 -->
		<uni-nav-bar leftWidth="0px" right-width="0px" height="180rpx" :border="false" :fixed="false">
			<view slot:default>
				<!-- 定位 -->
				<view class="location" @click="getLocation">
					<u-icon name="map" color="#296844" class="loca-icon" size="18"></u-icon>
					<text class="loca-text big">{{addr}}</text>
				</view>
				<!-- 搜索 -->
				<view class="search">
					<u-search :show-action="true" action-text="搜索" :animation="false" placeholder="请输入搜索内容"
						search-icon-color="#296844">
					</u-search>
				</view>
			</view>
		</uni-nav-bar>
		<view>
			<!-- 分类 -->
			<uni-card class="type">
				<uni-grid :column="4" :showBorder="false" :highlight="false" @change="typeClick">
					<uni-grid-item v-for="(item,index) in typeList" :index="index" :key="index" class="type-item">
						<image class="type-image" mode="aspectFill"
							:src="currentTypeIndex == index ? item.url1 : item.url" />
						<text
							:class="currentTypeIndex == index ? 'type-text middle green-color' : 'type-text middle black-color'">
							{{item.text}}
						</text>
					</uni-grid-item>
				</uni-grid>
			</uni-card>
			<!-- 筛选 -->
			<view class="sort">
				<button class="sort-card uni-radius uni-shadow-base" v-for="(item,index) in sortList" :key="index"
					@click="sortClick(index)">
					<text
						:class="currentSortIndex == index ? 'sort-text middle green-color' : 'sort-text middle black-color'">
						{{item.text}}
					</text>
				</button>
			</view>
			<!-- 店铺 -->
			<view v-if="storeList==''" class="tip">
				<text>该分类下暂无店铺</text>
			</view>
			<uni-card v-if="storeList!=''" v-for="(item,index) in storeList" :key="index"
				@click="storeClick($event,index)">
				<view class="store">
					<!-- 店铺图片 -->
					<view class="store-pic">
						<image class="store-image" :src="item.logo"></image>
					</view>
					<!-- 店铺信息 -->
					<view class="store-content">
						<!-- 店铺名字 -->
						<text class="store-name big black-color bold">{{item.name}}</text>
						<!-- 店铺评分、销量、距离 -->
						<view class="store-info">
							<view>
								<text class="middle red-color">{{item.score}} 分</text>
							</view>
							<text class="middle">月销 {{item.sale}}</text>
							<text class="middle">{{item.distance}} km</text>
						</view>
						<!-- 店铺标签 -->
						<view class="store-tag">
							<text class="tag" v-if="item.bread_type">烘焙</text>
							<text class="tag" v-if="item.drink_type">饮品</text>
							<text class="tag" v-if="item.meal_type">简餐</text>
						</view>
						<!-- 店铺商品 -->
						<view class="store-good">
							<text class="good-name middle black-color">{{item.goodList[0].name}}</text>
							<view>
								<text class="middle red-color">￥</text>
								<text class="good-price big red-color">{{item.goodList[0].price}}</text>
							</view>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	import bmap from '@/libs/bmap-wx.js';
	import utils from '../../utils/util.js'
	export default {
		data() {
			return {
				// addr: '定位中...',
				addr: '浙江省杭州市余杭塘路2318号',
				lat: '30.299174',
				lon: '120.022837',
				typeList: [{
					url: '/static/icon/all.png',
					url1: '/static/icon/all-selected.png',
					text: '全部'
				}, {
					url: '/static/icon/bread.png',
					url1: '/static/icon/bread-selected.png',
					text: '烘焙'
				}, {
					url: '/static/icon/drink.png',
					url1: '/static/icon/drink-selected.png',
					text: '饮品'
				}, {
					url: '/static/icon/meal.png',
					url1: '/static/icon/meal-selected.png',
					text: '简餐'
				}],
				currentTypeIndex: 0,
				sortList: [{
					text: '默认排序',
				}, {
					text: '距离最近',
				}, {
					text: '销量最高',
				}, {
					text: '好评优先',
				}],
				currentSortIndex: 0,
				storeList: '',
			}
		},
		onShow() {
			// utils.getLocation().then(res => {
			// 	this.addr = res.address;
			// 	this.lat = res.latitude;
			// 	this.lon = res.longitude;
			// }).catch(res => {
			// 	this.addr = res;
			// });
		},
		onLoad() {
			uniCloud.callFunction({
					name: 'getStoreList',
					data: {}
				})
				.then(res => {
					this.storeDistance(res.result.data);
				})
				.catch(error => {
					console.log(error);
				});
		},
		methods: {
			getLocation() {
				this.$data.addr = '定位中...';
				utils.getLocation().then(res => {
					this.$data.addr = res.address;
				}).catch(res => {
					this.$data.addr = res;
				});
			},
			//处理店铺列表的距离
			storeDistance(list) {
				//console.log(list);
				for (let i = 0; i < list.length; i++) {
					let s = this.distance(list[i].lat, list[i].lon);
					this.$set(list[i], 'distance', s);
				}
				this.storeList = list;
				//console.log(list);
			},
			//根据经纬度计算距离
			distance(lat1, lng1) {
				//用户经纬度
				let lat2 = this.lat;
				let lng2 = this.lon;
				//目前经纬度
				let rad1 = lat1 * Math.PI / 180.0;
				let rad2 = lat2 * Math.PI / 180.0;
				//计算
				let a = rad1 - rad2;
				let b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(
					Math.sin(b / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10000;
				s = s.toString();
				s = s.substring(0, s.indexOf('.') + 2);
				return s;
			},
			//类型筛选
			typeClick(e) {
				uni.showLoading({
					title: '加载中...',
				});
				let {
					index
				} = e.detail;
				this.currentTypeIndex = index;
				//全部类型
				if (this.currentTypeIndex == 0) {
					uniCloud.callFunction({
							name: 'getStoreList',
							data: {}
						})
						.then(res => {
							uni.hideLoading();
							this.storeDistance(res.result.data);
						})
						.catch(error => {
							console.log(error);
						});
				}
				//烘焙、饮品、简餐类型
				else {
					uniCloud.callFunction({
							name: 'getType',
							data: {
								"type": this.typeList[this.currentTypeIndex].text,
							}
						})
						.then(res => {
							uni.hideLoading();
							this.storeDistance(res.result.data);
						})
						.catch(error => {
							console.log(error);
						});
				}
			},
			//排序
			sortClick(index) {
				uni.showLoading({
					title: '加载中...',
				});
				this.currentSortIndex = index;
				//按距离排序
				let that = this;
				if (index == 1) {
					setTimeout(function() {
						uni.hideLoading();
						that.distanceSort();
					}, 400)
				}
				//其他
				else {
					uniCloud.callFunction({
							name: 'getSort',
							data: {
								"type": this.typeList[this.currentTypeIndex].text,
								"sort": this.sortList[this.currentSortIndex].text,
							}
						})
						.then(res => {
							uni.hideLoading();
							this.storeDistance(res.result.data);
						})
						.catch(error => {
							console.log(error);
						});
				}
			},
			distanceSort() {
				this.storeList = this.sortByInt(this.storeList, "distance");
			},
			sortByInt(array, key) {
				return array.sort(function(b, a) {
					var x = a[key]
					var y = b[key]
					return y - x
				})
			},
			//点击店铺
			storeClick(e, index) {
				uni.navigateTo({
					url: './store?store_id=' + this.storeList[index]._id
				});
			}
		}
	}
</script>

<style>
	.small {
		font-size: 20rpx;
	}

	.middle {
		font-size: 25rpx;
	}

	.big {
		font-size: 30rpx;
	}
	
	.bold {
		font-weight: bold;
	}

	.green-color {
		color: #296844;
	}

	.black-color {
		color: black;
	}

	.red-color {
		color: brown;
	}

	.location {
		display: flex;
		align-items: center;
		padding: 20rpx 0rpx 20rpx 20rpx;
		margin-top: 0rpx;
	}

	.loca-icon {
		margin-right: 15rpx;
	}

	.loca-text {
		width: 600rpx !important;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.type {
		position: sticky;
	}

	.type-item {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.type-text {
		display: flex;
		justify-content: center;
		margin: 10rpx;
	}

	.type-image {
		display: block;
		margin: 0 auto;
		width: 25px;
		height: 25px;
	}

	.sort {
		display: flex;
		justify-content: space-between;
		margin: 15px;
		padding: 0 20rpx;
	}

	.tip {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.sort-card {
		padding: 0rpx 20rpx;
		margin: 0 5rpx 10rpx 5rpx;
		display: inline-block;
		background-color: white;
	}

	.sort-text {
		display: flex;
		justify-content: center;
	}

	.store {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.store-pic {
		flex: 3;
	}

	.store-image {
		display: block;
		margin: 0 auto;
		width: 80px;
		height: 80px;
		border-radius: 5px;
	}

	.store-content {
		flex: 7;
	}

	.store-info {
		display: flex;
		justify-content: space-between;
	}

	.store-tag {
		display: flex;
		flex-direction: row;
	}

	.tag {
		width: 80rpx;
		height: 35rpx;
		border: 1px solid #296844;
		border-radius: 20rpx;
		font-size: 22rpx;
		color: #296844;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 15rpx;
	}

	.store-good {
		display: flex;
		justify-content: space-between;
		margin: 5rpx 0;
	}

	.good-name {
		width: 300rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.good-price {
		font-weight: bold;
	}
</style>